<template>
  <div class="faculty-container">
    <!-- 主体内容 -->
    <main class="content-wrapper">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1>师资力量</h1>
        <p>本页内容纯属虚构，仅用于展示页面布局，不代表实际情况</p>
      </div>
      
      <!-- 第一部分：核心师资规模与结构 -->
      <section class="faculty-structure">
        <h2 class="section-title">核心师资规模与结构</h2>
        
        <!-- 总规模 - 移到卡片模块外面 -->
        <div class="total-scale-container">
          <h3 class="total-scale-title">总规模</h3>
          <div class="total-scale-stats">
            <div class="total-stat-item">
              <span class="stat-number">2800+</span>
              <span class="stat-label">全校教职工总数</span>
            </div>
            <div class="total-stat-item">
              <span class="stat-number">2000+</span>
              <span class="stat-label">专任教师总数</span>
            </div>
          </div>
        </div>

        <div class="structure-cards">
          <!-- 职称结构 -->
          <div class="structure-card">
            <h3 class="card-title">职称结构</h3>
            <div class="stat-grid">
              <div class="stat-item">
                <span class="stat-number">650<span class="stat-percent"> (32.5%)</span></span>
                <span class="stat-label">正高级（教授、研究员等）</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">850<span class="stat-percent"> (42.5%)</span></span>
                <span class="stat-label">副高级（副教授、副研究员等）</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">500<span class="stat-percent"> (25%)</span></span>
                <span class="stat-label">中级及以下职称</span>
              </div>
            </div>
          </div>
          
          <!-- 学历与学缘结构 -->
          <div class="structure-card">
            <h3 class="card-title">学历与学缘结构</h3>
            <div class="stat-grid">
              <div class="stat-item">
                <span class="stat-number">92%<span class="stat-percent"></span></span>
                <span class="stat-label">博士学位教师占比</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">45%<span class="stat-percent"></span></span>
                <span class="stat-label">海外留学/访学经历教师占比</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">78%<span class="stat-percent"></span></span>
                <span class="stat-label">毕业于国内外顶尖高校的教师</span>
              </div>
            </div>
          </div>
          
          <!-- 年龄结构 -->
          <div class="structure-card">
            <h3 class="card-title">年龄结构</h3>
            <div class="stat-grid">
              <div class="stat-item">
                <span class="stat-number">60%<span class="stat-percent"></span></span>
                <span class="stat-label">45岁以下中青年教师占比</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">30%<span class="stat-percent"></span></span>
                <span class="stat-label">45-55岁教师占比</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">10%<span class="stat-percent"></span></span>
                <span class="stat-label">55岁以上教师占比</span>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 第二部分：高层次人才队伍 -->
      <section class="high-level-talent">
        <h2 class="section-title">高层次人才队伍</h2>
        
        <div class="talent-categories">
          <!-- 院士类 -->
          <div class="talent-category">
            <h3 class="category-title">院士类</h3>
            <div class="talent-list">
              <div class="talent-item" @click="showTalentDetail('academician')">
                <div class="talent-info">
                  <h4>中国科学院院士</h4>
                  <p>全职：8人 | 双聘：3人</p>
                </div>
                <span class="arrow-icon">→</span>
              </div>
              <div class="talent-item" @click="showTalentDetail('academician')">
                <div class="talent-info">
                  <h4>中国工程院院士</h4>
                  <p>全职：5人 | 双聘：2人</p>
                </div>
                <span class="arrow-icon">→</span>
              </div>
              <div class="talent-item" @click="showTalentDetail('academician')">
                <div class="talent-info">
                  <h4>海外院士</h4>
                  <p>美国科学院：2人 | 欧洲科学院：3人</p>
                </div>
                <span class="arrow-icon">→</span>
              </div>
            </div>
          </div>
          
          <!-- 国家级人才计划入选者 -->
          <div class="talent-category">
            <h3 class="category-title">国家级人才计划入选者</h3>
            <div class="talent-list">
              <div class="talent-item" @click="showTalentDetail('national')">
                <div class="talent-info">
                  <h4>国家自然科学基金杰出青年基金获得者</h4>
                  <p>32人</p>
                </div>
                <span class="arrow-icon">→</span>
              </div>
              <div class="talent-item" @click="showTalentDetail('national')">
                <div class="talent-info">
                  <h4>国家自然科学基金优秀青年基金获得者</h4>
                  <p>48人</p>
                </div>
                <span class="arrow-icon">→</span>
              </div>
              <div class="talent-item" @click="showTalentDetail('national')">
                <div class="talent-info">
                  <h4>长江学者奖励计划</h4>
                  <p>特聘教授：36人 | 讲座教授：12人 | 青年学者：28人</p>
                </div>
                <span class="arrow-icon">→</span>
              </div>
              <div class="talent-item" @click="showTalentDetail('national')">
                <div class="talent-info">
                  <h4>国家万人计划</h4>
                  <p>领军人才：24人 | 青年拔尖人才：32人</p>
                </div>
                <span class="arrow-icon">→</span>
              </div>
            </div>
          </div>
          
          <!-- 行业/领域顶尖人才 -->
          <div class="talent-category">
            <h3 class="category-title">行业/领域顶尖人才</h3>
            <div class="talent-list">
              <div class="talent-item" @click="showTalentDetail('industry')">
                <div class="talent-info">
                  <h4>国家级教学名师</h4>
                  <p>12人</p>
                </div>
                <span class="arrow-icon">→</span>
              </div>
              <div class="talent-item" @click="showTalentDetail('industry')">
                <div class="talent-info">
                  <h4>省级教学名师</h4>
                  <p>45人</p>
                </div>
                <span class="arrow-icon">→</span>
              </div>
              <div class="talent-item" @click="showTalentDetail('industry')">
                <div class="talent-info">
                  <h4>学科带头人</h4>
                  <p>国家重点学科：8人 | 国家级科研平台：15人</p>
                </div>
                <span class="arrow-icon">→</span>
              </div>
            </div>
          </div>
          
          <!-- 团队类人才 -->
          <div class="talent-category">
            <h3 class="category-title">团队类人才</h3>
            <div class="talent-list">
              <div class="talent-item" @click="showTalentDetail('team')">
                <div class="talent-info">
                  <h4>国家级教学团队</h4>
                  <p>10个</p>
                </div>
                <span class="arrow-icon">→</span>
              </div>
              <div class="talent-item" @click="showTalentDetail('team')">
                <div class="talent-info">
                  <h4>国家级科研创新团队</h4>
                  <p>15个</p>
                </div>
                <span class="arrow-icon">→</span>
              </div>
              <div class="talent-item" @click="showTalentDetail('team')">
                <div class="talent-info">
                  <h4>教育部长江学者和创新团队发展计划</h4>
                  <p>创新团队：12个</p>
                </div>
                <span class="arrow-icon">→</span>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 第三部分：特色补充内容 -->
      <section class="faculty-features">
        <h2 class="section-title">师资培养与发展</h2>
        
        <div class="features-content">
          <div class="feature-card">
            <h3 class="feature-title">青年教师培训计划</h3>
            <p>实施"青年英才培育工程"，为40岁以下青年教师提供系统化培养支持，包括国内外访学资助、科研启动基金、教学能力提升培训等。</p>
          </div>
          
          <div class="feature-card">
            <h3 class="feature-title">师资引进政策</h3>
            <p>推出"领军人才引育计划"，为高层次人才提供具有竞争力的薪酬待遇、科研启动经费、实验室建设支持以及住房保障等全方位支持。</p>
          </div>
          
          <div class="feature-card">
            <h3 class="feature-title">校企联合培养机制</h3>
            <p>与50余家行业龙头企业建立"双师型"教师培养基地，定期选派教师到企业实践锻炼，提升教师的实践教学能力和行业前沿视野。</p>
          </div>
          
          <div class="feature-card">
            <h3 class="feature-title">国际化师资</h3>
            <p>拥有外籍教师150余人，与20个国家和地区的50所高校建立联合培养师资机制，定期开展国际学术交流与合作。</p>
          </div>
        </div>
      </section>
      
      <!-- 师资队伍展示卡片 -->
      <section class="faculty-showcase">
        <h2 class="section-title">优秀教师代表</h2>
        
        <div class="faculty-cards">
          <div v-for="faculty in facultyList" :key="faculty.id" class="faculty-card" @click="showFacultyDetail(faculty)">
            <img :src="faculty.photo" alt="教师照片" class="faculty-photo">
            <div class="faculty-info">
              <h3 class="faculty-name">{{ faculty.name }}</h3>
              <p class="faculty-title">{{ faculty.title }}</p>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 显示师资力量详情
const showFacultyDetail = (faculty) => {
  router.push({
    path: '/facultyDetail',
    query: {
      name: faculty.name,
      title: faculty.title
    }
  });
};

// 显示人才类别详情
const showTalentDetail = (category, categoryName) => {
  // 从事件对象中获取点击的元素
  const event = window.event;
  const clickedItem = event.currentTarget;
  // 获取人才类别名称
  const talentName = clickedItem.querySelector('h4').textContent;
  
  // 跳转到人才类别列表页面
  router.push({
    path: '/talentCategoryList',
    query: {
      categoryType: category,
      categoryName: talentName
    }
  });
};

// 模拟师资力量数据
const facultyList = ref([
  { id: 1, name: '张三', title: '中国科学院院士', photo: '/path/to/photo1.jpg' },
  { id: 2, name: '李四', title: '长江学者特聘教授', photo: '/path/to/photo2.jpg' },
  { id: 3, name: '王五', title: '国家杰出青年基金获得者', photo: '/path/to/photo3.jpg' },
  { id: 4, name: '赵六', title: '国家级教学名师', photo: '/path/to/photo4.jpg' },
  { id: 5, name: '孙七', title: '青年长江学者', photo: '/path/to/photo5.jpg' },
  { id: 6, name: '周八', title: '国家万人计划青年拔尖人才', photo: '/path/to/photo6.jpg' },
  { id: 7, name: '吴九', title: '省级教学名师', photo: '/path/to/photo7.jpg' },
  { id: 8, name: '郑十', title: '学科带头人', photo: '/path/to/photo8.jpg' },
  { id: 9, name: '兰十一', title: '学科带头人', photo: '/path/to/photo9.jpg' },
  { id: 10, name: '黄十二', title: '学科带头人', photo: '/path/to/photo10.jpg' }
]);
</script>

<style scoped>
/* 主容器样式 */
.faculty-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

/* 内容区域样式 */
.content-wrapper {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  width: 100%;
}

/* 页面标题样式 */
.page-header {
  text-align: center;
  margin-bottom: 50px;
}

.page-header h1 {
  font-size: 36px;
  color: #2c3e50;
  margin-bottom: 15px;
  font-weight: 700;
}

.page-header p {
  font-size: 18px;
  color: #7f8c8d;
}

/* 区块标题样式 */
.section-title {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #3498db;
}

/* 师资结构样式 */
.faculty-structure {
  margin-bottom: 60px;
}

/* 总规模容器样式 */
.total-scale-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.total-scale-title {
  font-size: 22px;
  color: #2c3e50;
  margin-bottom: 25px;
  font-weight: 600;
  text-align: center;
}

.total-scale-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 20px;
}

.total-stat-item {
  flex: 1;
  text-align: center;
  padding: 20px;
  border-radius: 6px;
  background-color: #f8f9fa;
}

.total-stat-item .stat-number {
  font-size: 32px;
  color: #3498db;
}

.total-stat-item .stat-label {
  font-size: 16px;
  color: #5d6d7e;
}

.structure-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.structure-card {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.structure-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.card-title {
  font-size: 20px;
  color: #2c3e50;
  margin-bottom: 20px;
  font-weight: 600;
}

.stat-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #3498db;
  margin-bottom: 5px;
}

.stat-percent {
  font-size: 18px;
  font-weight: 400;
  color: #7f8c8d;
}

.stat-label {
  font-size: 14px;
  color: #5d6d7e;
}

/* 高层次人才样式 */
.high-level-talent {
  margin-bottom: 60px;
}

.talent-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.talent-category {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.category-title {
  font-size: 20px;
  color: #2c3e50;
  margin-bottom: 20px;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid #ecf0f1;
}

.talent-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.talent-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.talent-item:hover {
  background-color: #e3f2fd;
  transform: translateX(5px);
}

.talent-info h4 {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 5px;
}

.talent-info p {
  font-size: 14px;
  color: #7f8c8d;
}

.arrow-icon {
  color: #3498db;
  font-size: 18px;
  transition: transform 0.3s ease;
}

.talent-item:hover .arrow-icon {
  transform: translateX(5px);
}

/* 特色内容样式 */
.faculty-features {
  margin-bottom: 60px;
}

.features-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.feature-card {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.feature-title {
  font-size: 18px;
  color: #2c3e50;
  margin-bottom: 15px;
  font-weight: 600;
}

.feature-card p {
  font-size: 14px;
  color: #5d6d7e;
  line-height: 1.6;
}

/* 师资展示卡片样式 */
.faculty-showcase {
  margin-bottom: 40px;
}

.faculty-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.faculty-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faculty-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.faculty-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.faculty-info {
  padding: 15px;
  text-align: center;
}

.faculty-name {
  font-size: 18px;
  color: #2c3e50;
  margin-bottom: 5px;
  font-weight: 600;
}

.faculty-title {
  font-size: 14px;
  color: #7f8c8d;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-wrapper {
    padding: 20px 15px;
  }
  
  .page-header h1 {
    font-size: 28px;
  }
  
  .section-title {
    font-size: 24px;
  }
  
  .structure-cards,
  .talent-categories,
  .features-content,
  .faculty-cards {
    grid-template-columns: 1fr;
  }
  
  .talent-item {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}
</style>